<!--左侧列表烂  -->
<template>
  <div class="tabewts">
    <div class="batmodule">
      <div class="menuheart">
        <div class="menhaode">
          <ul class="information">
            <li class="lihove">
              <router-link to="/phone">手机 电话卡</router-link>
              <i class="iconfont iconyoujiantou"></i>
              <div class="childern">
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/x1.webp" alt>
                      <router-link to="/phoneshop">小米MIX FOLD</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x2.webp" alt>

                      <router-link to="/phoneshop">小米10</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x3.webp" alt>

                      <router-link to="/phoneshop">K40 游戏增强版</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x4.webp" alt>

                      <router-link to="/phoneshop">Redmi Note 9 4G</router-link>
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/x5.webp" alt>

                      <router-link to="/phoneshop">小米MIX FOLD</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x6.webp" alt>
                      <router-link to="/phoneshop">黑鲨4 Pro</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x7.webp" alt>
                      <router-link to="/phoneshop">K40 Pro 系列</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x8.webp" alt>
                      <router-link to="/phoneshop">Redmi Note 8 Pro</router-link>
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/x5.webp" alt>
                      <router-link to="/phoneshop">小米11 Pro</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x6.webp" alt>
                      <router-link to="/phoneshop">黑鲨4</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x7.webp" alt>
                      <router-link to="/phoneshop">Redmi K40</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x8.webp" alt>
                      <router-link to="/phoneshop">手机上门维修</router-link>
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/x9.webp" alt>
                      <router-link to="/phoneshop">小米11 青春</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x13.webp" alt>
                      <router-link to="/phoneshop">Redmi K30S 至尊纪念版</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x11.webp" alt>
                      <router-link to="/phoneshop">K40 游戏增强版</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x12.webp" alt>
                      <router-link to="/phoneshop">Redmi Note 9 4G</router-link>
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/x13.webp" alt>
                      <router-link to="/phoneshop">小米MIX FOLD</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x14.webp" alt>
                      <router-link to="/phoneshop">小米10</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x15.webp" alt>
                      <router-link to="/phoneshop">K40 游戏增强版</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x16.webp" alt>
                      <router-link to="/phoneshop">Redmi Note 9 4G</router-link>
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/x17.webp" alt>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x18.webp" alt>
                      <router-link to="/phoneshop">小米10</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x19.webp" alt>
                      <router-link to="/phoneshop">K40 游戏增强版</router-link>
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/x20.webp" alt>
                      <router-link to="/phoneshop">Redmi Note 9 4G</router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <router-link to="/com">电视 笔记本</router-link>
              <i class="iconfont iconyoujiantou"></i>
              <div class="childern">
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/d1.webp" alt>
                      Redmi MAX 86 超大屏
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d2.webp" alt>
                      Redmi 智能电视 X系列
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d3.webp" alt>
                      小米盒子
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d4.webp" alt>
                      电视音箱
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/d5.webp" alt>
                      小米透明电视
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d6.webp" alt>
                      小米电视大师 82英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d7.webp" alt>
                      大师电视 65英寸 OLED
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d8.webp" alt>
                      Redmi 智能电视 MAX 98
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/d9.webp" alt>
                      小米电视5 Pro 55英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d10.webp" alt>
                      小米电视5 Pro 65英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d11.webp" alt>
                      小米电视5 Pro 75英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d12.webp" alt>
                      小米电视5 75英寸
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/d13.webp" alt>
                      小米电视5 65英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d14.webp" alt>
                      小米电视5 55英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d15.webp" alt>
                      小米电视4A 60英寸
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d16.webp" alt>
                      小米电视4A 70英寸
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/d17.webp" alt>
                      Redmi 智能电视 A系列
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d18.webp" alt>
                      小米10
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d19.webp" alt>
                      K40 游戏增强版
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d20.webp" alt>
                      Redmi Note 9 4G
                    </a>
                  </li>
                </ul>
                <ul>
                  <li>
                    <a href>
                      <img src="../assets/img/d21.webp" alt>
                      小米MIX FOLD
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d22.webp" alt>
                      小米10
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d23.webp" alt>
                      K40 游戏增强版
                    </a>
                  </li>
                  <li>
                    <a href>
                      <img src="../assets/img/d24.webp" alt>
                      Redmi Note 9 4G
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <router-link to="/watch">家电 插线板</router-link>
              <i class="iconfont iconyoujiantou"></i>
            </li>
            <li>
              <a href>出行 穿戴</a>
              <i class="iconfont iconyoujiantou"></i>
            </li>
            <li>
              <a href>智能 路由器</a>
              <i class="iconfont iconyoujiantou"></i>
            </li>
            <li>
              <a href>电源 配件</a>
              <i class="iconfont iconyoujiantou"></i>
            </li>
            <li>
              <a href>健康 儿童</a>
              <i class="iconfont iconyoujiantou"></i>
            </li>
            <li>
              <a href>耳机 音箱</a>
              <i class="iconfont iconyoujiantou"></i>
            </li>
            <li>
              <a href>生活 箱包</a>
              <i class="iconfont iconyoujiantou"></i>
            </li>
          </ul>
        </div>
        <berysatu/>
      </div>
    </div>
    <Advertising/>
  </div>
</template>

<script>
import berysatu from "./berysatu.vue";
import Advertising from "./Advertising.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "tabewts",
  components: {
    berysatu,
    Advertising
  },
  data() {
    //这里存放数据
    return {
      isCollapse: true
    };
  }
};
</script>
<style lang="less" scoped>
/* //@import url(); 引入公共css类 */
.tabewts {
  position: relative;
  .batmodule {
    width: 1226px;
    height: 460px;
    margin-right: auto;
    margin-left: auto;
    .menuheart {
      height: 460px;
      border: 0;
      color: #fff;
      /* background: rgba(105,101,101,.6); */
      .menhaode {
        position: absolute;
        z-index: 18;
        width: 234px;
        height: 460px;
        font-size: 14px;
        .information {
          height: 460px;
          border: 0;
          color: #fff;
          position: relative;
          background: rgba(105, 101, 101, 0.6);
          li {
            display: block;
            height: 51px;
            &:hover {
              background-color: #ff6700;
              .childern {
                display: block;
              }
            }
            i {
              float: right;
              margin: 12px;
              text-align: right;
              font-size: 16px;
              line-height: 16px;
              color: #e0e0e0;
            }
            a {
              margin-left: 30px;
              line-height: 51px;
              color: #fff;
            }
            .childern {
              display: none;
              width: 990px;
              height: 458px;
              top: 0px;
              left: 234px;
              border: 1px solid #e5e5e5;
              position: absolute;
              background-color: #fff;
              ul {
                display: flex;
                justify-content: space-between;
                height: 75px;
                line-height: 75px;
                li {
                  width: 248px;
                  height: 50px;
                  line-height: 50px;
                  flex: 1;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  padding: 15px 0;
                  a {
                    // margin: 0;
                    width: 248px;
                    height: 42px;
                    font-size: 14px;
                    color: #333;
                    text-overflow: ellipsis;
                    &:hover {
                      color: #ff6700;
                    }
                  }
                  img {
                    width: 42px;
                    // height: 12px;
                    vertical-align: middle;
                  }
                  &:hover {
                    background-color: #fff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>